<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="500px">
		<template #header>
			<div style="color: #fff">{{_d.record ? '编辑' : '添加'}}供应商</div>
		</template>
	  <el-form :model="_d.form" ref="formRef" :rules="_d.rules" label-width="10em">
			<el-form-item label="公司名称" prop="companyName">
				<el-input style="width: 300px;" v-model="_d.form.companyName" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="统一社会信用代码" prop="unifiedSocialCode">
				<el-input style="width: 300px;" v-model="_d.form.unifiedSocialCode" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="企业类别" prop="companyType">
				<el-select style="width: 300px;" v-model="_d.form.companyType" placeholder="请选择">
					<el-option v-for="item in _d.companyTypeList"
						:key="item.code"
			      :label="item.value"
			      :value="item.code"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="法人姓名" prop="legalPersonName">
				<el-input style="width: 300px;" v-model="_d.form.legalPersonName" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="法人身份证" prop="legalPersonId">
				<el-input style="width: 300px;" v-model="_d.form.legalPersonId" placeholder="请输入"/>
			</el-form-item>
			<!-- <el-form-item label="委托人" prop="consignors">
				<el-select v-model="_d.form.consignors" filterable placeholder="请选择" style="width: 100%;">
		      <el-option
		        v-for="item in _d.personList"
		        :key="item.id"
		        :value="item.id"
		        :label="item.name">
		        <div>{{item.name}}-{{item.cellPhone}}</div>
		      </el-option>
		    </el-select>
			</el-form-item> -->
			<el-form-item label="城市" prop="city">
				<el-input v-model="_d.form.city" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="公司地址" prop="companyAddress">
				<el-input v-model="_d.form.companyAddress" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="经营内容" prop="scope">
				<el-input v-model="_d.form.scope" type="textarea" :rows="5" placeholder="请输入"/>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
				<el-button type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {$get, $post} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";
import {editRemoveKey} from "../template.js";
import {verifyPhone, verifyIdCard} from "/@/utils/toolsValidate.ts";

const emits = defineEmits(['reload']);

const oUserInfo = useUserInfo();
const formRef = ref();

const _d = reactive({
	visible: false,
	record: null,

	form: {
		companyName: '',
		unifiedSocialCode: '',
		companyType: null,
		legalPersonName: '',
		legalPersonId: '',
		// consignors: '',
		city: '',
		companyAddress: '',
		scope: '',
	},

	rules: {
		companyName: [
			{ required: true, message: '公司名称不能为空', trigger: 'change'}
		],
		unifiedSocialCode: [
			{ required: true, message: '统一社会信用代码不能为空', trigger: 'change'}
		],
		companyType: [
			{ required: true, message: '企业类别不能为空', trigger: 'change'}
		],
		legalPersonName: [
			{ required: true, message: '法人姓名不能为空', trigger: 'change'}
		],
		legalPersonId: [
			{ trigger: 'change', validator: (rule, value, callback) => {
				if(value && !verifyIdCard(value)) {
					callback('请输入正确的身份证号');
				} else {
					callback();
				}
			}}
		],
		// consignors: [
		// 	{ required: true, message: '委托人不能为空', trigger: 'blur'}
		// ],
	},

	// 人员列表
	personList: [],
	// 企业类别
	companyTypeList: [],

});

onMounted(async () => {
	getPersonList();
	// 获取企业类别列表
	getCompanyType();
});

// 打开弹窗
const open = (record) => {
	_d.record = record || null;
	formRef.value?.resetFields();
	if(record) {
		for(let key in _d.form) {
			_d.form[key] = record[key];
		}
	}
	_d.visible = true;
};

// 取消
const cancel = () => {
	_d.visible = false;
};

// 获取企业类别列表
const getCompanyType = () => {
	$get('/sysDictData/dataList?code=company_type').then(res => {
		_d.companyTypeList = res.result;
	})
}

const getPersonList = () => {
	$get('/personSrv/getpersonall').then(res => {
		_d.personList = res.result;
	})
}

// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		if(!_d.record) {
			addSave();
		} else {
			editSave();
		}
	})
}

const addSave = () => {
	let params = {
		..._d.form
	}
	$post('/providerSrv/insprovider', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '添加成功',
	    type: 'success',
	  })
	  emits('reload');
	  _d.visible = false;
	})
}

const editSave = () => {
	let params = {
		id: _d.record.id,
		..._d.form
	}
	$post('/providerSrv/modifyprovider', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '编辑成功',
	    type: 'success',
	  })
	  emits('reload');
	  _d.visible = false;
	})
}


// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 150px;
}
</style>
